<template>
	<section class="vbox">
		<section class="scrollable padder">
			<section class="panel panel-default m-t-sm">
				<header class="panel-heading">
					API管理
					<ul class="nav nav-tabs pull-right no-border">
						<li class="m-r-sm m-t-xs">
							<el-input placeholder="输入API标题关键字" v-model="keywords" clearable>
								<template #append>
									<el-button slot="append" type="success" icon="icon-magnifier icon" @click="query(1)"></el-button>
								</template>
							</el-input>
						</li>
						<li class="m-r-md m-t-xs">
							<button class="btn btn-success" @click="model={}; dialogFormVisible = true"><i class="fa fa-plus-circle"></i> 新增</button>
						</li>
					</ul>
				</header>
				<div class="panel-body">
					<el-table size="medium" :data="apiList" stripe style="width: 100%" border>
						<el-table-column fixed type="index" width="auto" :index="indexMethod">
						</el-table-column>
						<el-table-column prop="title" label="接口标题">
						</el-table-column>
						<el-table-column prop="module" label="接口模块">
						</el-table-column>
						<el-table-column prop="requestMethod" label="请求方法">
						</el-table-column>
						<el-table-column prop="requestUri" label="请求资源地址">
						</el-table-column>
						<el-table-column prop="requestContentType" label="请求格式">
						</el-table-column>
						<el-table-column prop="enable" label="是否可用" width="100">
							<template v-slot="scope">
								<label class="switch  btn-xs">
									<input class="" type="checkbox" v-model="scope.row.enable" :value="true">
									<span></span>
								</label>
							</template>
						</el-table-column>
						<el-table-column prop="updateTime" label="更新时间">
						</el-table-column>
						<el-table-column align="center" label="操作" width="100">
							<template v-slot="scope">
								<el-button type="text" icon="fa fa-2x fa-edit text-success" @click="edit(scope.row)"></el-button>
								<el-button type="text" icon="fa fa-2x fa-trash-o text-danger-dker" @click="deleteSysDict(scope.row.id)"></el-button>
							</template>
						</el-table-column>
					</el-table>

					<pagination :total="total" :pageNo='pageNo' :pageSize='pageSize' @onPageChange="query"></pagination>
				</div>

				<el-dialog :title="model.id==null ? '新增': '编辑'" v-model="dialogFormVisible">
					<form class="form-horizontal" action="#" method="get" onsubmit="return false;" data-validate="parsley">
						<div class="form-group">
							<label class="col-sm-2 control-label">接口标题</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.title" class="form-control parsley-validated" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">接口模块</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.module" class="form-control parsley-validated" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">请求方法</label>
							<div class="col-sm-10">
								<select class="form-control" v-model="model.requestMethod">
									<option v-for="item in webSites" v-bind:value="item.code" :key="item.code">
										{{ item.name }}
									</option>
									<option value="GET">GET</option>
									<option value="POST">POST</option>
									<option value="PUT">PUT</option>
									<option value="DELETE">DELETE</option>
								</select>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">请求资源地址</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.requestUri" class="form-control parsley-validated" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">请求格式</label>
							<div class="col-sm-10">
								<div class="radio i-checks radio-inline">
									<label>
										<input type="radio" name="requestContentType" v-model.trim="model.requestContentType" value="application/x-www-form-urlencoded">
										<i></i> application/x-www-form-urlencoded
									</label>
								</div>
								<div class="radio i-checks radio-inline">
									<label>
										<input type="radio" name="requestContentType" v-model.trim="model.requestContentType" value="multipart/form-data">
										<i></i> multipart/form-data
									</label>
								</div>
								<div class="radio i-checks radio-inline">
									<label>
										<input type="radio" name="requestContentType" v-model.trim="model.requestContentType" value="application/json">
										<i></i> application/json
									</label>
								</div>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label"></label>
							<div class="col-sm-10">
								<div class="checkbox i-checks">
									<label>
										<input type="checkbox" v-model="model.enable" :value="true"><i></i> 是否可用
									</label>
								</div>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<div class="col-sm-10 col-sm-offset-2">
								<button type="submit" class="btn btn-success pull-right" @click="submit()">提交</button>
							</div>
						</div>
					</form>
				</el-dialog>

			</section>
		</section>
	</section>

</template>

<script>
	export default {
		components: {
			name: 'menu'
		},
		data() {
			return {
				dialogFormVisible: false,
				apiList: [],
				total: 0, // 记录总条数
				pageSize: 10, // 每页显示条数
				pageNo: 1, // 当前的页数
				keywords: '',
				model: {
					code: '',
					name: ''
				}
			}
		},
		mounted() {
			this.query(1);
		},
		methods: {
			indexMethod(index) {
				return this.pageSize * (this.pageNo - 1) + index + 1;
			},
			submit() {
				if (this.model.id == null) {
					this.$api.api.add(this.model).then(id => {
						this.model.id = id;
						this.query(1);
					});
				} else {
					this.$api.api.update(this.model);
				}
				this.dialogFormVisible = false;
			},
			query(pageNo) {
				this.pageNo = null == pageNo ? 1 : pageNo;
				this.$api.api.query({
					title: this.keywords,
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					parentCode: 0
				}).then(data => {
					this.apiList = data.rows;
					this.pageNo = data.pageNo;
					if (1 == this.pageNo) {
						this.total = data.total;
					}
				});
			},
			edit(model) {
				this.model = model;
				this.dialogFormVisible = true;
			},
			deleteSysDict(id) {
				this.$confirm('您确定要执行删除操作吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$api.api.delete(id).then(data => {
						if (1 == data.code) {
							this.query(this.pageNo);
						}
					});
				});
			}
		}
	}
</script>

<style>
	.switch span {
		height: 28px;
		margin-top: 8px;
	}
</style>
